<template>
  <div>
    <!--<home-header :city="city"></home-header>-->
    <!--<home-header :city="this.$store.state.city"></home-header>-->
    <home-header :city="citycrunt"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-remcommend :recommendList="recommendList"></home-remcommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
//  导入组件
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRemcommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import {mapState} from 'vuex'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    HomeHeader: HomeHeader,
    HomeIcons: HomeIcons,
    HomeSwiper: HomeSwiper,
    HomeWeekend: HomeWeekend,
    HomeRemcommend: HomeRemcommend
  },
  data () {
    return {
      lastcity:'',
      city:'',
      swiperList:[],
      iconList:[],
      recommendList:[],
      weekendList:[]
    }
  },
  computed:{
    ...mapState({citycrunt:'city'})
  },
  methods: {
    getHomeInfo () {
      var this_ = this;

      //  修改
/*
  开发阶段接口测试-config/index.js
  这个代表将/api/index.json?变成
    http://localhost:8099/static/mock/index.json?
    proxyTable: {
      '/api': {
        target: 'http://localhost:8099',
        pathRewrite:{
          '^/api':'/static/mock'
        }
      }
    },
    上线接口测试--这个代表将/api/index.json?变成
    http://localhost:8099/index.json?
        proxyTable: {
      '/api': {
        target: 'http://localhost:8099'
      }
    },
    注意涉及到跨域，前端不需要修改任何内容，但是后端需要修改跨域
    webpack-dev-server 调试期间，不能通过ip地址访问外地IP，
     真机测试- 192.168.1.104
     http://192.168.1.104:8099
    因此需要修改package.json
      "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
      为
      "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
      运行 npm run start
      npm run dev  貌似也是一样的
      start和dev都是JS脚本的键
      请看这个大仙的分析

      真机测试时，局域网中，手机端也会修改样式，当代码改变时，这中间的原理应该是通过一个长久的连接来做到的

      http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
            <h4>  打包上线 npm run build </h4>
        <h4> proxyTable 只有在 npm run dev 才有效。以及真机测试才有效，
            打包上线，则是调用具体的后端接口，因此，后端接口不应该写死。应该规范的写在一起 </h4>
    打包上线到GitHub上面的话，应该使用项目路径。

      */
      // axios.get('api/index.json?city='+this.citycrunt)
      // 上线到git-pages用相对路径
      console.log("home-------");
      axios.get('./api/index.json?city='+this.citycrunt)
        .then(
          this_.getHomeInfoSucess
        )
        .catch(function (error) {
          console.log(error);
        });
      // axios.get('/static/mock/index.json')
      //   .then(
      //     this_.getHomeInfoSucess
      //   )
      //   .catch(function (error) {
      //     console.log(error);
      //   });
    },
    getHomeInfoSucess (res) {
      var data=res.data;
      // console.log('请求数据成功')
      // console.log(res)
      if(data.ret&&data.city){
          this.city=data.city;
          this.swiperList=data.data.swiperList;
          // console.log(data.data.swiperList)
          this.iconList=data.data.iconList;
          this.recommendList=data.data.recommendList;
          this.weekendList=data.data.weekendList;
      };
      // console.log(this.city);
    }
  },
  mounted () {
    console.log('mounted')
    // this.lastcity=this.city;  这样写会渲染不出来数据
    //  因为city还没出来
    this.lastcity=this.citycrunt;
    this.getHomeInfo()
  },
  //  使用keep-alive才会出现的生命周期钩子
  activated(){
    //  页面切换的时候会执行，，而mounted只执行一次
    console.log('activated')
    if(this.lastcity!==this.citycrunt){
      //  城市不相等重新加载城市数据数据
      this.lastcity=this.citycrunt;
      this.getHomeInfo()
    }
  }

}
</script>

<style>

</style>
